<!--课题信息统计-查询历史数据-->
<template>
  <div class="wrapper-container">
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" @selection-change="handleSelectionChange">
        <el-table-column type="selection"  width="55"></el-table-column>
        <el-table-column prop="courseName" label="序号" align="center"  width="55"></el-table-column>
        <el-table-column prop="courseName" label="操作" align="center" width="120">
          <div slot-scope="scope" style="margin-top: 10px;">
            <span class="small-btn color2 width90" @click="editInfo(scope.row)">
              <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" /> 编辑
            </span>
            <span class="small-btn color-yellow width90" @click="seeInfo(scope.row)">
              <img src="../../../assets/assessment/icon-import.png" alt="" /> 下载
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="examDate" label="课程名称" align="center" min-width="130"> </el-table-column>
        <el-table-column prop="examTypeName" label="当前阶段/流程" align="center" min-width="200"></el-table-column>
        <el-table-column prop="teacherList" label="课题编号" align="center" min-width="130">
          <template slot-scope="scope">
            <span class="small-btn color2" @click="editKT(scope.row)">
              <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" /> 输入
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="totalPoint" label="课题类别" align="center" min-width="130">
            <template slot-scope="scope">
                <el-select style="width:100px" v-model="scope.row"></el-select>
            </template>
        </el-table-column>
        <el-table-column prop="excellentLine" label="状态" align="center"  min-width="130"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="填报日期" align="center"  min-width="200"></el-table-column>
        <el-table-column prop="examBatchName" label="课程负责人" align="center" min-width="130"> </el-table-column>
        <el-table-column prop="countryInfo" label="部职别" align="center" min-width="130"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="课题负责人职称" align="center" min-width="150"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="研究目标" align="center" min-width="130"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="研究内容及研究方法" align="center" min-width="200"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="预期成果" align="center" min-width="200"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="完成时限" align="center" min-width="200"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="课题组成员" align="center" min-width="200"></el-table-column>
        <el-table-column prop="examStatisticsVO" label="确定立项时间" align="center" min-width="200">
            <div slot-scope="scope">
                <el-date-picker class="time" v-model="scope.row.effdate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
        </el-table-column>
        <el-table-column prop="examStatisticsVO" label="验收时间" align="center" min-width="200">
            <div slot-scope="scope">
                <el-date-picker class="time" v-model="scope.row.effdate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
        </el-table-column>
        <el-table-column prop="examStatisticsVO" label="建设周期" align="center" min-width="200">
            <div slot-scope="scope">
                <el-input style="width:100px"></el-input>&nbsp;年
            </div>
        </el-table-column>
        <el-table-column prop="examStatisticsVO" label="备注" align="center" min-width="200">
            <template slot-scope="scope">
                <el-input type="textarea" :rows="2"></el-input>
            </template>
        </el-table-column>
        </el-table>
    </div>
    <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
    <div class="pagination-block">
        <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 课题编号 -->
    <ktNum ref="kt"></ktNum>
  </div>
</template>

<script>
import {commonList,examTypeList} from "@/api/exam";
import fileDownload from "js-file-download"
import Axios from 'axios'
import ktNum from './ktNum.vue'
export default {
  data() {
    return {
      dataForm:{
        examTypeId:'',//考试类型ID
        pageNo:1,
        size:50,
        year:'',//年份
      },
      tableData: [
        {totalPoint:1,excellentLine:'2'}
      ],
      gradeList:[],
      total:1
    };
  },
  components:{ktNum},
  mounted(){
    // this.dataForm.year = new Date().getFullYear()+''
    // this.getList();
    // this.getTypeList()
  },
  methods: {
    handleSelectionChange(){

    },
    async getTypeList(){
    let res = await examTypeList({size:9999,current:1})
    this.gradeList = [{id:'0000',typeName:'请选择'},...res.data.records]
    },
    async getList(){
    let params = {
        ...this.dataForm,
        examTypeId:this.dataForm.examTypeId == '0000'?'':this.dataForm.examTypeId
    }
    let res = await commonList(params)
    this.tableData = res.data.records
    this.total =  res.total
    },
    //编辑
    editInfo(row){
        this.$router.push({
          path:'/teachingTopics/activity/declareForm',
          query:{
            id:row.id,
            isFixed:row.isFixed?true:false,
            type:3
          }
        })
      },
    editKT(){
      this.$refs.kt.dialogKT = true;
      this.$nextTick(()=>{
        this.$refs.kt.$refs.ruleForm.resetFields();
      })
    },
    // 下载
    downloadFile(){
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/examBatch/exportData/manageList',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '公共考试成绩.xlsx');
      }); 
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.width90{width: 90px;}
.small-btn{margin-bottom: 14px;}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
}
.color1{
    background: #ffefef;
    border: 1px solid #fa5339;
    color: #fa5339;
}
.color2{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
}
.item-name {
  color: #004ca7;
}
.fsx{
  span{
    display: block;
    margin-bottom: 10px;
  }
}
</style>
